<template>
  <el-dialog   :width="width" :visible="visible" :show-close="false" @close="handleClose">
    <div slot="title" class="title-wrapper">
      <div class="close-icon-wrapper" @click="$emit('close')">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="title-text">
        {{ title }}
      </div>
    </div>
    <el-form ref="form" size="medium" :rules="rules" :model="form" :label-width="labelWidth">
      <el-row :gutter="15">
<!--        <el-col :md="12" :sm="24">-->
<!--          <el-form-item label="轮播图" prop="image" >-->
<!--            <ad-upload v-model="form.image"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :md="12" :sm="24">-->
<!--          <el-form-item label="类型" prop="type" >-->
<!--            <el-select @change="changeData" v-model="form.type" placeholder="请选择类型" style="width: 90%">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :md="12" :sm="24" v-if="show === 2 || form.type === 2">-->
<!--          <el-form-item label="链接" prop="" >-->
<!--            <el-input-->
<!--              v-model="form.content" style="width: 90%" clearable></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :md="24" :sm="24">
          <el-form-item label="标题" prop="title" >
            <el-input
              v-model="form.title" style="width: 90%" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24" >
          <el-form-item label="富文本" prop="" >
            <editor v-model="form.content" :value="form.content"  />
          </el-form-item>
        </el-col>
      </el-row>
      <slot></slot>
    </el-form>
    <span slot="footer" class="dialog-footer" style="margin-top: 100px">

        <el-button class="confirm-btn"  type="primary" @click="submit">确 定</el-button>
       <el-button class="cancel-btn" @click="$emit('close')">取 消</el-button>
      </span>
  </el-dialog>

</template>

<script>
import editor from "@/components/Editor/QuillEditor.vue"
import AdUpload from '@/components/AdUpload/index.vue'
import { announcementAdd, announcementEdit } from '@/api/modular/system/loginManage'

export default {
  name: "areaEnteringForm",
  components: {
    AdUpload,editor
  },
  props:{
    title: {
      type: String,
      default: ''
    },
    edit: {
      type: String,
      default: ''
    },
    width:{
      type: String,
      default: '50%'
    },
    visible: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: '120px'
    },
    form:{
      type: Object,
      default() {
        return {}
      }
    },
    rules:{
      type: Object,
      default() {
        return {}
      }
    },
  },
  data(){
    return {
      content:'',
      show:'',
      options:[
        {
          value:2,
          label:'链接'
        },
        {
          value:1,
          label:'富文本'
        }
      ],
      imageUrl: "",
      pictureLoading: false,
    }
  },
  methods: {
    handleClose(){
      this.show = ''
      this.$emit('close')
    },
    changeData(e){
        this.show = e
    },
    submit() {
      let form = {...this.form}
      this.$refs.form.validate(valid=> {
        if(valid) {
          if (!this.edit){
            announcementAdd({
              "title": form.title,
              "content": form.content,
              delFlag: 1
            }).then(response =>{
              this.$message.success('新增成功')
              this.$emit('close')
              this.$emit('getList')
            })
          }else {
            announcementEdit({
              "delFlag": 1,
              "id": form.id,
              "image": form.image,
              "type": form.type,
              "content": form.content,
              "sort": form.sort,
              'title':form.title
            }).then(response =>{
              this.$message.success('编辑成功')
              this.$emit('close')
              this.$emit('getList')
            })
          }
        }
      })
    },
    handleChange(file) {
      const fileTemp = file.raw;
      console.log("fileTemp", fileTemp);
      const imgTypes = ["image/jpeg", "image/png", "image/jpg"];

      const isImg = imgTypes.includes(fileTemp.type);
      if (fileTemp) {
        if (isImg) {
          this.upload(fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "图片格式错误，请重新上传！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传图片！",
        });
      }
    },
    upload(file) {
      const tmpcnt = file.name.lastIndexOf(".");
      const suffix = file.name.substring(tmpcnt + 1);
      this.pictureLoading = true;
      const fileName = getFileNameUUID() + "." + suffix;
      client()
        .multipartUpload(
          fileName,
          file,
          {
            headers,
          },
          {
            progress: function (percentage, cpt) {
              console.log("打印进度", percentage);
            },
          }
        )
        .then((res) => {
          console.log(res);
          this.imageUrl =
            "http://" + res.bucket + "." + setting.endpoint + "/" + res.name;
          this.form.image = this.imageUrl;
          this.pictureLoading = false;
        })
        .catch((err) => {
          this.pictureLoading = false;
        });
    },
  }
}
</script>


<style lang="scss" scoped>
::v-deep.el-dialog__header {
  padding: 0 !important;
  height: 66px;
  background: linear-gradient(
      148deg,
      #3aa1fe 0%,
      #4679fe 28%,
      #3aa1fe 54%,
      #3aa1fe 79%,
      #1753e2 100%
  );
}

::v-deep .el-dialog__body {
  padding-top: 40px !important;
}

::v-deep .el-dialog__footer {
  padding: 0 0 30px !important;
  border: none !important;
}

.title-wrapper {
  position: relative;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;

  .close-icon-wrapper {
    position: absolute;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 66px;
    color: #fff;
    //font-size: $xxl-font-size;
    cursor: pointer;
  }

  .title-text {
    //font-size: $lg-font-size;
    color: #ffffff;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;

  .confirm-btn {
    margin-right: 118px;
    width: 150px;
    height: 42px;
    background: #3aa1fe;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }

  .cancel-btn {

    width: 150px;
    height: 42px;
    background: #9cafc6;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }
}
.img {
   width: 100px;
   height: 100px;
   display: block;
 }
</style>

